import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { addAction, minusAction } from "../store/actionCreators";

export class About extends PureComponent {
  calcNumber = (num, isAdd) => {
    const { addNumber, minusNumber } = this.props;
    if (isAdd) {
      addNumber(num);
    } else {
      minusNumber(num);
    }
  };

  render() {
    const { counter, banners, recommends } = this.props;
    return (
      <div>
        <h3>About : {counter}</h3>
        <div className="btn-group">
          <button onClick={() => this.calcNumber(1, true)}>+1</button>
          <button onClick={() => this.calcNumber(5, true)}>+5</button>
          <button onClick={() => this.calcNumber(3)}>-3</button>
        </div>
        <div>
          <h3>轮播图数据</h3>
          <ul>
            {banners.map((item, index) => {
              return <li key={index}>{item.title}</li>;
            })}
          </ul>
        </div>
        <div>
          <h3>推荐数据</h3>
          <ul>
            {recommends.map((item, index) => {
              return <li key={index}>{item.title}</li>;
            })}
          </ul>
        </div>
      </div>
    );
  }
}

// 把mapStateToProps函数变成箭头函数
const mapStateToProps = (state) => {
  return {
    counter: state.counter, // 把 state.counter 映射到 props.counter
    banners: state.banners,
    recommends: state.recommends,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addNumber: (num) => dispatch(addAction(num)),
    minusNumber: (num) => dispatch(minusAction(num)),
  };
};

// connect 第一个参数是 mapStateToProps，第二个参数是 mapDispatchToProps
// connect 会返回一个函数，这个函数接收一个组件，返回一个新的组件
// 新的组件会自动订阅 store，并且会把 store 中的数据作为 props 传递给组件
// 新的组件会自动 dispatch action，并且会把 dispatch 作为 props 传递给组件
// 新的组件会自动 unsubscribe store，并且会在组件卸载的时候调用 unsubscribe
// 新的组件会自动重新渲染，并且会在 store 中的数据发生变化的时候调用 render
// 新的组件会自动重新渲染，并且会在组件的 props 发生变化的时候调用 render
// 新的组件会自动重新渲染，并且会在组件的 state 发生变化的时候调用 render
// 新的组件会自动重新渲染，并且会在组件的生命周期函数发生变化的时候调用 render
export default connect(mapStateToProps, mapDispatchToProps)(About);
